<template>
	<view class="rectangle">
		<view style="padding: 5px 0 5px 5px;display: flex;flex-direction: column;flex: 1;">
			<view style="display: flex;align-items: center;gap: 5px;padding: 5px 20px;">
				<tn-icon name="/static/logo2.png" size="48" offset-top="5"></tn-icon>
				<text class="main-title top-font-title">悦玺云商</text>
			</view>
			<view :style="{backgroundColor: data.color || data.cardqy.color}"
				style="display: flex;flex-direction: column;align-items: center;padding: 15px 0;color: #fff;">
				<view v-if="title === '代金券'" class="text-title">￥{{(data.value / 100).toFixed(2)}}</view>
				<view v-if="data.cardpt !== null" class="text-title">{{data.cardpt.name}}</view>
				<view v-if="data.cardqy !== null" class="text-title">{{data.cardqy.name}}</view>
				<view class="">———— {{title}} ————</view>
			</view>
			<view v-if="data" style="display: flex;gap: 5px;font-size: small;color: #888;padding: 5px 10px 2px 10px;">
				<view class="">适用门店:</view>
				<view>{{data.place.nicename}}</view>
			</view>
			<view style="display: flex;gap: 5px;font-size: small;color: #888;padding: 2px 10px 5px 10px;">
				<view class="">有效期:</view>
				<view class="">{{data.outtime}}</view>
			</view>
		</view>
		<view class="rectangle-child" style="color: #fff;">
			<view v-if="title === '代金券'">￥{{(data.value / 100).toFixed(2)}}</view>
			<view v-if="data.cardpt !== null" style="text-wrap: wrap;">{{data.cardpt.name}}</view>
			<view v-if="data.cardqy !== null">{{data.cardqy.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "sub-card-card",
		data() {
			return {

			};
		},
		props: {
			data: {
				type: Object,
				default: null
			},
			level: {
				type: Object,
				default: []
			},
			title: {
				type: String,
				default: '代金券'
			}
		},

	}
</script>

<style lang="scss" scoped>
	.rectangle {
		position: relative;
		margin-bottom: 10px;
		display: flex;
		background: radial-gradient(circle, transparent 0, transparent 5px, #ffaa7faa 6px);
		background-repeat: repeat;
		background-size: 100% 19px;
		background-position: calc(-50vw + 9px) -3px;
	}

	.rectangle::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 120px;
		width: 10%;
		height: 100%;
		border-right: 2px dashed #fff;
		z-index: 1;
		background-color: transparent;
	}

	.rectangle-child {
		width: 120px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.buy-price::first-letter {
		font-size: larger;
	}

	.main-title {
		color: $uni-color-banner;
		font-size: large;
		font-weight: bold;
	}

	.text-title {
		font-size: larger;
		font-weight: bold;
	}
</style>